<%- include('head') -%>
</head>
<body>
    <div class="layui-container-fluid">
        <!-- 面包屑导航 -->
        <div class="nav">
         <span class="layui-breadcrumb">
             <a href="/main">首页</a>
             <a href="/cateList">分类列表</a>
             <a><cite>增加分类</cite></a>
           </span>
        </div>
        <div class="content" style="margin:20px 30px;max-width:600px;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                  <label class="layui-form-label">分类标题</label>
                  <div class="layui-input-block">
                    <input type="text" name="cateName" required  lay-verify="required" placeholder="请输入分类标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类图标</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                          </button>
                          <img width="200" id="img" src="" alt="">
                    </div>
                  </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">父级分类</label>
                  <div class="layui-input-block">
                    <select name="pid" lay-verify="required">
                      <option value="0">顶级分类</option>
                      <% for(var i=0;i<cates.length;i++){ %>
                        <option value="<%= cates[i]._id %>"> <%= cates[i].cateName %> </option>
                      <%}%>
                    </select>
                  </div>
                </div>
                
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">分类简介</label>
                  <div class="layui-input-block">
                    <textarea name="cateDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
              </form>
        </div>
    </div>
<%- include('footer') -%>
<script>
    layui.use(['element','laypage','form','upload','jquery','layer'],()=>{
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;
        var layer = layui.layer;
        // 待上传分类数据
        let uploadData = {};
        // 上传文件
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: '/upload/' //上传接口
            ,field:'img'  //上传文件 字段
            ,done: function(res){
            //上传完毕回调
             console.log(res)
              if(res.code===0){
                uploadData.cateIcon = res.data.filename;
                $("#img").attr('src',res.data.filename)
              }
            }
            ,error: function(){
            //请求异常回调
            console.log('失败了')
            }
        });
         //监听提交
        form.on('submit(formDemo)', function(data){
          // data.
          console.log(data.field)
            uploadData = {
              ...uploadData,
              ...data.field,
              createAt:Date.now()
            }
            $.ajax({
              url:'/cateAdd',
              type:'POST',
              dataType:'json',
              data:uploadData,
              success:function(res){
                if(res.code===0){
                  layer.msg(res.msg,{
                    icon:1,
                    time:2000
                  },function(){
                    // 刷新一下页面
                    history.go(0);
                  })
                }
              }
            })
            return false;
        });
    })
</script>
</body>
</html>
